<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
      /*  !*子代选择器，只能一级一级的去找，不能越级*!
        #d1>div>div{
            color: red;
        }
        !*后代选择器，找到#d1所有p元素，可以越级*!
        #d1 p{
            background: cornflowerblue;
        }*/

        /*!*接续兄弟选择器,后边紧挨着的兄弟*!
        #d_11 +div{
            color: red;
        }*/
        /*后代兄弟选择器，后边所有兄弟*/
      #d_11~p{
          color: red;
      }
      #d1>div:first-child>div:first-child{
          color: aqua;
      }
    </style>

</head>
<body>
    <div id="d1">
        这是父div
        <div id="d_11">
            这是长子div
            <div id="d_11_1">
                这是长子长孙diver
                <p>
                    曾孙
                </p>
            </div>
            <div id="d_11_2">
                这是长子次孙div
            </div>
        </div>
        <div id="d_12">
            这是次子div
            <div id="d_12_1">
                这是次子的长子div,也是一个孙子div
            </div>
            <p>
                孙子
            </p>
        </div>
        <p>
        三子
        </p>
        <div>
            四子
        </div>
        <p>
            五子
        </p>
    </div>

</body>
</html>